
html, body {
  padding:0;
  margin:0;
}

body {
  overflow:hidden;
}

.visual_editor > .inner {
  font-family:arial;
  font-size:0.95em;
  background-color:#eee;
  position:relative;
}


.visual_editor .inner > .innerContent {
  margin-right:290px;
  padding-left:1em;
  padding-right:1em;
  height:100%;
  overflow:auto;
}
.visual_editor .inner > .innerCss {
  position:absolute;
  top:0;
  right:0;
  width:290px;
  height:100%;
  padding:0;
  margin:0;
  border-left:1px solid #ccc;
  background:white;  
}

.visual_editor .inner > .innerCss,
.visual_editor .inner > .innerCss input[type="text"] {
  font-family:consolas, 'lucida sans';
  font-size:12px;
}
.visual_editor .inner > .innerCss input[type="text"] {
  padding:0;
  margin:0;
  border:none;
  position:relative;
  left:-1px;
}

.visual_editor .innerCss {
  overflow:auto;
}
.visual_editor .innerCss .cssAttr {
  color:DarkMagenta;
}
.visual_editor .innerCss .cssPair {
  padding-left:1em;
}
.visual_editor .innerCss .cssPair .static {
  display:block;
}
.visual_editor .innerCss .cssGroup {
  /*padding-left:0.5em;*/
  margin-bottom:0.25em;
}
.visual_editor .innerCss .editing .static {
  display:none;
}

.visual_editor .innerCss .cssPair .editor input {
  width:100%;
}

.cssGroupTitle {
  color:#000077;
  background-color:#ddd;
  display:block;
  cursor:pointer;
  _cursor:hand;
  font-family:arial;
  font-size:12px;

}

.cssGroupTitle .selector {
  /*font-weight:bold;*/
}

.cssGroup .brace {
  color:gray;
  position:absolute;
  top:-2000px;
}


.visual_editor .innerContent form {
  background-color:white;
  -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
  -moz-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
  padding:10px;
  padding-bottom:8px;
  padding-top:8px;
}


i {
  position:fixed;
  bottom:0.5em;
  right:300px;
}

.visual_editor .pagerInner {
  border:1px solid silver;
  padding:0.5em;
  
}


.visual_editor .toolbar {
  cursor:n-resize;

/* made using http://gradients.glrzad.com/ */
 background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(224,224,224)),
      color-stop(0, rgb(197,197,197))
  );

  background:-moz-linear-gradient(
      center bottom,
      rgb(196,196,196) 0%,
      rgb(224,224,224) 70%,
      rgb(240,240,240) 100%
  );
}

.nodePathITem {
  color:#333;
  text-decoration:none;
  padding-right:4px;
}

.nodePathITem {
  padding:1px 4px;
  border-radius:8px;
}

.toolbar .separator {
  padding-left:0.25em;
  color:gray;
}

.toolbar .nodePathITem:hover {
  background-color:#777;
}
.toolbar .nodePathITem:hover .name,
.toolbar .nodePathITem-selected .name {
  color:white;
}

.toolbar .nodePathITem:hover .separator,
.toolbar .nodePathITem-selected .separator {
  color:#ccc;
}

.toolbar .nodePathITem-selected {
  background-color:#555;
  color:white;
}



#page {
  overflow:auto;
  position:fixed;
  top:0;
  width:100%;
}

.visual_editor {
  background-color:white;
  width:100%;
  position:fixed;
  bottom:0;
  /*
  -webkit-box-shadow:-10px 0px 5px rgba(0,0,0,0.15);
  -moz-box-shadow:-10px 0px 5px rgba(0,0,0,0.15);
  */
}



.visual_editor .toolbar {
  background-color:#eee;
  border-top:1px solid #ccc;
  border-bottom:1px solid silver;
  font-family:verdana;
  font-size:10px;
  padding:3px 4px;
}

.Thing-editing {
  background-color:rgba(170, 221, 255, 0.75);
  outline:2px white dashed;
  outline-offset: 4px;
}

.Thing-EditingHover {
  background-color:#8ff;
}

.visual_editor .inner > form {
  margin-left:auto;
  margin-right:auto;
  max-width:800px;
}

.creatorWindow {
  margin-bottom:0em;
  position:relative;
}
.creatorWindow-PageThing {
  width:800px;
  margin-left:auto;
  margin-right:auto;
}
form .creatorWindow .controls {
  -webkit-opacity:0;
  opacity:0;
  position:absolute;
  right:0;
  height:0;
  font-size:12px !important;
}
.creatorWindow .controls:hover {
  opacity:1;
  -webkit-opacity:1;
}
.creatorWindow .controls .buttons {
  display:block;
  float:right;
}

.creatorWindow .label {
  display:none;
  color:#aaa;
  font-weight:bold;
  /*text-shadow: #333 0px 0px 2px;*/
  margin-left:0.4em;
}






/* pretty buttons --------------------------------------------------------- */

.creatorWindow .controls .buttons a, a.button, input[type="submit"] {
  border:none;
  display:inline !important;

  color:#333;
  text-decoration:none;

  font-size:14px !important;

  line-height:30px;
  padding-left:12px;
  padding-right:12px;

  padding-top:3px;
  padding-bottom:3px;

  /* chrome renders the gradient to shadow better with this on */
  background-color:#ddd;


  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.30);
  -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.30);
  text-shadow: #eee 1px 1px 2px;


  cursor:default;

 /* made using http://gradients.glrzad.com/ */
 background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(224,224,224)),
      color-stop(0, rgb(197,197,197))
  );

  background:-moz-linear-gradient(
      center bottom,
      rgb(196,196,196) 0%,
      rgb(224,224,224) 70%,
      rgb(240,240,240) 100%
  );

  -webkit-transition: color 0.5s linear;
  -webkit-transition: text-shadow 0.5s linear;
  -webkit-transition: -webkit-box-shadow 0.5s linear;
}

/* fix for different rendering on inputs */
input[type="submit"] {
  line-height:16px;
  padding-right:10px;
  padding-left:11px;
}

.creatorWindow .controls .buttons a:hover, a.button:hover, input[type="submit"]:hover {
  color:#111;
  text-shadow: #fff 1px 1px 2px;
  -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.75);

  /* made using http://gradients.glrzad.com/ */
   background-image:-webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(1, rgb(240,240,240)),
      color-stop(0.65, rgb(230,230,230)),
      color-stop(0, rgb(187,187,187))
  );
  background:-moz-linear-gradient(
      center bottom,
      rgb(187,187,187) 0%,
      rgb(230,230,230) 65%,
      rgb(240,240,240) 100%
  );

}
.creatorWindow .controls .buttons a:active, a.button:active, input[type="submit"]:active {
  position:relative;
  top:1px;
}

/* </pretty buttons> */




.creatorWindow-SidebarContainer {
  float:left;
  width:290px;
}
.creatorWindow-ContentContainer {
  margin-left:290px;
}
.creatorWindow-ContentContainer {
  /*float:left;
  width:540px;
  */
}
a.add {
  display:block;
  text-align:center;
}
.creatorWindow-FooterContainer {
  clear:both;
}
.creatorWindow-TitleThing .inner .InputText {
  font-size:2em;
  width:99%;
}


  #title {
    padding:0;
    margin:0;
    margin-right:0.25em;
    margin-left:0;
    display:block;
    float:left;
  }
  iframe {
    border:none;
    width:100%;
    height:90%;
    padding:0;
    margin:0;
  }
  #menu {
    padding:0;
    margin:0;
    margin-top:1px;
  }
  #menu li {
    display:block;
    float:left;
  }
  #menu li a {
    color:black;
    text-decoration:none;
    margin-right:6px;
  }

  #head {
    height:2.1em;
    width: 30em;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #888;
    border-radius:30px;
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-top:none;
    background-color:#999;
  }

.content-list .item {
  padding-right:0.5em;
}

.content-list .item a {
  color:black;
  text-decoration:none;
  border-bottom:1px solid #ddd;
  display:block;
  padding-right:0.5em;
}

.content-list .item a:hover {
  border-bottom:1px solid #777;
}







/* Thing --------------------------------------------------------------------- */

textarea {
  width:99%;
}






/* Content template editor -------------------------------------------------- */

.ContentTemplates h1 {
  margin-top:0.2em;
}

.contentTemplateList {
  width:440px;
  margin-left:auto;
  margin-right:auto;
  padding-top:0.5em;
}
.contentTemplate {
  display:block;
  width:96px;
  height:150px;
  /*border:1px solid silver;*/
  float:left;
  margin-right:10px;
  margin-bottom:1em;
}
.contentTemplate .icon {
  width:96px;
  height:118px;
  border:1px solid #999;
  margin-bottom:4px;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0, 0.25);
  background-color:#ccc;
  overflow:hidden;
  position:relative;
  -webkit-transition: -webkit-box-shadow 0.3s linear;
  -webkit-transition: background 0.3s linear;
}
.contentTemplate .icon span {
  font-size:6em;
  position:relative;
  left:-0.25em;
  top:0.25em;
  color:#fff;
  text-shadow: #ddd 0px 0px 16px;
  -webkit-transition: text-shadow 0.3s linear;
}
.contentTemplate a {
  text-decoration:none;
  color:#555;

  -webkit-transition: color 0.5s linear;
}
.contentTemplate a:hover {
  color:black;

}
.contentTemplate a:hover .icon {
  -webkit-box-shadow:0px 0px 6px rgba(0,0,0, 0.40);
  background-color:#777;
}
.contentTemplate a:hover .icon span {
  text-shadow: #aaa 0px 0px 16px;
}




/* Structure editor --------------------------------------------------------- */

.structure-editor .NodeMenu {
  /*float:left;*/
  margin-right:1.25em;
}
.structure-editor .NodeMenu,.structure-editor  .NodeMenu ul {
  margin-left:0;
  padding-left:0;
}
.structure-editor .NodeMenu li {
  list-style-type:none;
}
.structure-editor .NodeMenu li li {
  margin-left:15px;
}
.structure-editor .NodeMenu li a {
  color:black;
  text-decoration:none;
}
.structure-editor {
  width:600px;
  margin-left:auto;
  margin-right:auto;
}



/* Site Designer ------------------------------------------------------------ */


#site_designer {
  width:74%;
  margin:0; padding:0;
  border:0;
  float:left;
}
#css_editor {
  margin:0; padding:0;
  width:25%;
  /*height:50em;*/
  float:right;
}
#css_editor textarea {
  font-size:13px;
  font-family:consolas;
}

.foldable-area .CodeMirror-wrapping {
  max-height:600px;
  overflow:auto;
  border:1px solid gray;
}

.foldable-hide .foldable-area {
  display:none;
}

.foldable-title {
  background-color:#eee;
  border:1px solid #ccc;
  border-bottom:none;
  font-size:0.9em;
  font-weight:bold;
  padding:2px;
  padding-left:4px;
  display:block;
  color:black;
  text-decoration:none;
}

.foldable .last {
  border-bottom:1px solid #ccc;
}

